<template>
  <div class="birthday">
    <div class="left-view">
      <!-- 有图片显示内容 -->
      <el-carousel
        v-if="list[leftIndex].banner.length"
        :class="list[leftIndex].layout=='bannerNav'?'leftBtn':''"
        class="banner-box"
      >
        <el-carousel-item
          v-for="(item1, index1) in list[leftIndex].banner"
          :key="index1"
          class="banner-item"
        >
          <div class="img-box">
            <!-- <a :href="list[leftIndex].banner[index1].link"> -->
            <img :src="list[leftIndex].banner[index1].imgUrl" alt />
            <!-- </a> -->
          </div>
        </el-carousel-item>
        <div v-show="list[leftIndex].layout=='bannerNav'" class="nav-menu">
          <div v-for="(val1,num1) in list[leftIndex].menu" :key="num1" class="first-menu">
            <div class="first-menu-list">
              <span>{{ val1.title }}</span>
              <i class="el-icon-arrow-right" />
              <div class="second-menu">
                <div v-for="(val2,num2) in val1.secondList" :key="num2" class="second-menu-list">
                  <div>{{ val2.title }}</div>
                  <div>{{ val2.explain }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-carousel>
    </div>
    <div v-if="list[leftIndex].showRight" class="right-view">
      <div class="nav-title">图片广告设置</div>
      <div class="form-title">样式选择</div>
      <el-radio-group v-model="list[leftIndex].layout">
        <el-radio label="banner">图片广告</el-radio>
        <el-radio label="bannerNav">图片+分类导航</el-radio>
      </el-radio-group>
      <div class="form-title">广告图设置</div>
      <div class="form-hint">最多添加4张轮播图，拖动轮播图可调整排序</div>
      <vuedraggable v-model="list[leftIndex].banner" class="wrapper" animation="300">
        <transition-group>
          <div v-for="(item2, index2) in list[leftIndex].banner" :key="index2" class="upload-box">
            <div class="removeBtn" @click.stop @click="removeBanner(index2)">
              <img src="/src/assets/settinyschool/delete.png" alt />
            </div>
            <el-upload
              :show-file-list="false"
              :on-success="(response, file, fileList)=>handleAvatarSuccess(response, file, fileList, index2)"
              :before-upload="beforeAvatarUpload"
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
            >
              <img
                v-if="list[leftIndex].banner[index2].imgUrl"
                :src="list[leftIndex].banner[index2].imgUrl"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
            <el-select
              v-model="list[leftIndex].banner[index2].linkName"
              placeholder="请选择跳转页面"
              style="width: 224px;"
              @change="skipChange($event,index2)"
            >
              <el-option
                v-for="item in linkOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </transition-group>
      </vuedraggable>
      <el-upload
        v-if="list[leftIndex].banner.length<4"
        :show-file-list="false"
        :on-success="addUploadSuccess"
        :before-upload="beforeAvatarUpload"
        class="addUploa-box"
        action="https://jsonplaceholder.typicode.com/posts/"
      >
        <el-button icon="el-icon-upload2" class="addUploadBtn">上传图片</el-button>
        <div slot="tip" class="el-upload__tip">(尺寸要求：1200*448)</div>
      </el-upload>
      <div class="form-title">分类导航</div>
      <div class="form-hint">可拖拽自定义顺序</div>
      <el-collapse accordion class="collapse-box">
        <vuedraggable v-model="list[leftIndex].menu" class="wrapper" animation="300">
          <transition-group>
            <el-collapse-item v-for="(item3, index3) in list[leftIndex].menu" :key="index3">
              <template slot="title">
                <div class="collapse-list">
                  <div v-if="!(editShow&&editListIndex==index3)" class="title">{{ item3.title }}</div>
                  <el-input
                    v-if="editShow&&editListIndex==index3"
                    v-model="item3.title"
                    maxlength="6"
                    style="width:150px"
                  />
                  <div class="btn">
                    <el-button
                      v-if="!(editShow&&editListIndex==index3)"
                      icon="el-icon-edit"
                      size="mini"
                      circle
                      @click.stop="editShowClick(index3)"
                    />
                    <el-button
                      v-if="editShow&&editListIndex==index3"
                      icon="el-icon-check"
                      size="mini"
                      circle
                      @click.stop="editShowClick(index3)"
                    />
                    <el-button
                      icon="el-icon-delete"
                      size="mini"
                      circle
                      @click.stop="deleteFirstNav(index3)"
                    />
                  </div>
                </div>
              </template>
              <vuedraggable
                v-model="item3.secondList"
                handle=".icon-menu"
                class="wrapper"
                animation="300"
              >
                <transition-group>
                  <div v-for="(item4, index4) in item3.secondList" :key="index4" class="menu-item">
                    <div class="icon-menu" />
                    <div class="menu-item-level2">
                      <div class="level1-title">{{ item4.title }}</div>
                      <div class="operate-modules">
                        <el-button
                          icon="el-icon-edit"
                          size="mini"
                          circle
                          @click="addSecondNav(index3,index4)"
                        />
                        <el-button
                          icon="el-icon-delete"
                          size="mini"
                          circle
                          @click="deleteSecondNav(index3,index4)"
                        />
                      </div>
                    </div>
                  </div>
                </transition-group>
              </vuedraggable>
              <el-button
                icon="el-icon-plus"
                style="width:90%;margin:10px 20px;"
                @click="addSecondNav(index3)"
              >添加二级导航</el-button>
            </el-collapse-item>
          </transition-group>
        </vuedraggable>
      </el-collapse>

      <el-button icon="el-icon-plus" style="width:100%;margin-top:10px;" @click="addFirstNav">添加一级导航</el-button>
    </div>
    <!-- 二级菜单编辑弹框 -->
    <el-dialog :visible.sync="secondMenuDialog" title="编辑二级导航" width="600px">
      <el-form ref="menuForm" :model="menuForm" :rules="menuRules" label-width="100px">
        <el-form-item label="导航名称" prop="title">
          <el-input
            v-model="menuForm.title"
            maxlength="6"
            placeholder="请输入标题名称"
            style="width: 400px;"
          />
        </el-form-item>
        <el-form-item label="导航说明" prop="explain">
          <el-input
            v-model="menuForm.explain"
            maxlength="10"
            placeholder="请输入导航说明"
            style="width: 400px;"
          />
        </el-form-item>
        <el-form-item label="跳转链接" prop="link">
          <input v-show="!list[leftIndex].menu" v-model="menuForm.link" type="text" />
          <el-select
            v-model="menuForm.linkName"
            placeholder="请选择跳转页面"
            style="width: 400px;"
            @change="selectSecondMenuLink($event)"
          >
            <el-option
              v-for="item in linkOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="menuCancel">取 消</el-button>
        <!-- 编辑确定 -->
        <el-button v-if="!confirmShow" type="primary" @click="menuEditConfirm">编辑确 定</el-button>
        <!-- 添加确定 -->
        <el-button v-if="confirmShow" type="primary" @click="menuConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 微页面弹框 -->
    <micropagedialog
      :dialog="microPageDialog"
      @cancelClick="cancelClick"
      @confirmClick="microPageConfirm"
    />
    <!-- 知识商品 -->
    <studyarticledialog
      :dialog="studyArticleDialog"
      @cancelClick="cancelClick"
      @confirmClick="studyArticleConfirm"
    />
    <!-- 商品分组 -->
    <articlegroupdialog
      :dialog="articleGroupDialog"
      @cancelClick="cancelClick"
      @confirmClick="articleGroupConfirm"
    />
    <!-- 自定义链接 -->
    <customlinkdialog
      :dialog="customLinkDialog"
      @cancelClick="cancelClick"
      @confirmClick="customLinkConfirm"
    />
  </div>
</template>

<script>
import vuedraggable from 'vuedraggable'
import micropagedialog from '../dialog/micropagedialog'
import articlegroupdialog from '../dialog/articlegroupdialog'
import customlinkdialog from '../dialog/customlinkdialog'
import studyarticledialog from '../dialog/studyarticledialog'
export default {
  components: {
    vuedraggable,
    micropagedialog,
    articlegroupdialog,
    customlinkdialog,
    studyarticledialog
  },
  props: ['list', 'leftIndex'],
  data() {
    return {
      linkOptions: [
        {
          value: '微页面',
          label: '微页面'
        },
        {
          value: '知识商品',
          label: '知识商品'
        },
        {
          value: '商品分组',
          label: '商品分组'
        },
        {
          value: '自定义链接',
          label: '自定义链接'
        }
      ],
      secondMenuDialog: false,
      microPageDialog: false,
      articleGroupDialog: false,
      customLinkDialog: false,
      studyArticleDialog: false,
      selectValue: '',
      linkIndex: '',
      avtiveName: '1',
      // 编辑二级菜单列表数据
      editListIndex: '',
      editShow: false,
      // 编辑二级菜单显示弹框数据
      firstIndex: '',
      secondIndex: '',
      confirmShow: false,
      menuForm: {
        title: '',
        explain: '',
        link: '',
        linkName: ''
      },
      menuRules: {
        title: [{ required: true, message: '请输入标题名称', trigger: 'blur' }],
        explain: [{ required: true, message: '请输入导航说明', trigger: 'blur' }],
        link: [{ required: true, message: '请选择跳转页面', trigger: 'change' }]
      }
    }
  },
  mounted() {
    // console.log(this.list, this.leftIndex)
  },
  methods: {
    // 图片上传
    handleAvatarSuccess(res, file, fileList, index) {
      this.list[this.leftIndex].banner[index].imgUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 添加图片上传
    addUploadSuccess(res, file) {
      var newImg = URL.createObjectURL(file.raw)
      this.list[this.leftIndex].banner.push({
        link: '',
        linkName: '',
        imgUrl: newImg
      })
    },
    // 删除轮播事件
    removeBanner(index) {
      this.list[this.leftIndex].banner.splice(index, 1)
    },
    // 添加一级导航
    addFirstNav() {
      if (this.list[this.leftIndex].menu.length > 6) {
        this.$message.warning('最多添加7项一级菜单')
        return
      }
      this.list[this.leftIndex].menu.push({
        title: '一级导航',
        secondList: []
      })
    },
    // 删除一级导航
    deleteFirstNav(index) {
      this.$confirm('确认删除吗', '提示', {
        confirmButtonText: '确定',
        cancleButtonText: '取消'
      }).then(() => {
        this.list[this.leftIndex].menu.splice(index, 1)
      })
    },
    // 添加二级导航
    addSecondNav(firstIndex, secondIndex) {
      if (this.list[this.leftIndex].menu[firstIndex].secondList.length > 4) {
        this.$message.warning('最多添加5项二级菜单')
        return
      }
      this.firstIndex = firstIndex
      this.secondIndex = secondIndex
      if (this.secondIndex === undefined || null || '') {
        this.confirmShow = true
      } else {
        this.confirmShow = false
      }
      this.secondMenuDialog = true
    },
    // 删除二级导航
    deleteSecondNav(menuIndex, index) {
      this.list[this.leftIndex].menu[menuIndex].secondList.splice(index, 1)
    },
    // 选择跳转
    skipChange(val, index) {
      this.selectValue = val
      this.linkIndex = index
      if (val === '微页面') {
        this.microPageDialog = true
      } else if (val === '知识商品') {
        this.studyArticleDialog = true
      } else if (val === '商品分组') {
        this.articleGroupDialog = true
      } else if (val === '自定义链接') {
        this.customLinkDialog = true
      }
    },
    // 接收弹框取消事件
    cancelClick() {
      this.microPageDialog = false
      this.studyArticleDialog = false
      this.articleGroupDialog = false
      this.customLinkDialog = false
    },
    // 微页面弹框确认事件
    microPageConfirm(data) {
      this.microPageDialog = false
      if (this.menuDialogClick) {
        this.menuForm.linkName = this.selectValue + ' | ' + data.name
        this.menuForm.link = data.link
        this.menuDialogClick = false
        return
      }
      this.list[this.leftIndex].banner[this.linkIndex].linkName = this.selectValue + ' | ' + data.name
      this.list[this.leftIndex].banner[this.linkIndex].link = data.link
    },
    // 知识商品确认事件
    studyArticleConfirm(data) {
      this.studyArticleDialog = false
      if (this.menuDialogClick) {
        this.menuForm.linkName = this.selectValue + ' | ' + data.name
        this.menuForm.link = data.link
        this.menuDialogClick = false
        return
      }
      this.list[this.leftIndex].banner[this.linkIndex].linkName = this.selectValue + ' | ' + data.name
      this.list[this.leftIndex].banner[this.linkIndex].link = data.link
    },
    // 商品分组弹框确认事件
    articleGroupConfirm(data) {
      this.articleGroupDialog = false
      if (this.menuDialogClick) {
        this.menuForm.linkName = this.selectValue + ' | ' + data.name
        this.menuForm.link = data.link
        this.menuDialogClick = false
        return
      }
      this.list[this.leftIndex].banner[this.linkIndex].linkName = this.selectValue + ' | ' + data.name
      this.list[this.leftIndex].banner[this.linkIndex].link = data.link
    },
    // 自定义链接弹框确认事件
    customLinkConfirm(data) {
      this.customLinkDialog = false
      if (this.menuDialogClick) {
        this.menuForm.linkName = this.selectValue + ' | ' + data.name
        this.menuForm.link = data.link
        this.menuDialogClick = false
        return
      }
      this.list[this.leftIndex].banner[this.linkIndex].linkName = '链接' + ' | ' + data.link
      this.list[this.leftIndex].banner[this.linkIndex].link = data.link
    },
    // 选择二级菜单弹框事件
    selectSecondMenuLink(val) {
      this.selectValue = val
      this.menuDialogClick = true
      if (val === '微页面') {
        this.microPageDialog = true
      } else if (val === '知识商品') {
        this.studyArticleDialog = true
      } else if (val === '商品分组') {
        this.articleGroupDialog = true
      } else if (val === '自定义链接') {
        this.customLinkDialog = true
      }
    },
    menuCancel() {
      this.secondMenuDialog = false
      this.$refs.menuForm.resetFields()
    },
    // 一级编辑显示编辑框事件
    editShowClick(index) {
      this.editListIndex = index
      this.editShow = !this.editShow
    },
    // 编辑二级菜单内容确定
    menuEditConfirm() {
      this.$refs.menuForm.validate((valid) => {
        if (valid) {
          const newMenuDate = JSON.parse(JSON.stringify(this.menuForm))
          this.list[this.leftIndex].menu[this.firstIndex].secondList[this.secondIndex] = newMenuDate
          this.secondMenuDialog = false
          this.$refs.menuForm.resetFields()
          this.menuForm.linkName = ''
        } else {
          return false
        }
      })
    },
    // 添加二级菜单内容确定
    menuConfirm() {
      this.$refs.menuForm.validate((valid) => {
        if (valid) {
          this.list[this.leftIndex].menu[this.firstIndex].secondList.push({
            ...this.menuForm
          })
          this.secondMenuDialog = false
          this.menuForm.linkName = ''
          this.$refs.menuForm.resetFields()
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.birthday {
  padding: 10px;
  .left-view {
    cursor: move;
    .banner-box {
      height: 448px;
      position: relative;
      /deep/.el-carousel__container {
        height: 448px;
      }
      .banner-item {
        z-index: -1;
      }
      .img-box {
        width: 100%;
        height: 445px;
        position: absolute;
        z-index: -1;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .nav-menu {
        width: 240px;
        height: 445px;
        background: rgba($color: #131212, $alpha: 0.8);
        top: 0;
        left: 0;
        padding: 10px 0;
        z-index: 20;
        .first-menu {
          color: #ffffff;
          font-size: 14px;
          .first-menu-list {
            line-height: 20px;
            padding: 15px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            .second-menu {
              display: none;
              position: absolute;
              left: 240px;
              top: 0;
              width: 230px;
              height: 445px;
              padding: 10px 0;
              z-index: 5;
              cursor: auto;
              color: #131212;
              background: rgba($color: #fff, $alpha: 0.8);

              box-shadow: 4px 8px 16px 0px rgba(0, 0, 0, 0.1);
              .second-menu-list {
                height: 50px;
                padding: 0 0 0 32px;
                line-height: 26px;
                margin: 0 0 20px;
                div:first-child {
                  font-weight: bold;
                }
                div:last-child {
                  color: #2c2b2b;
                }
              }
              .second-menu-list:hover {
                background-color: #93beff;
              }
            }
          }
        }
        .first-menu:hover {
          .first-menu-list {
            background-color: #3478f5;
          }
          .second-menu {
            display: block;
          }
        }
      }
    }
    .banner-box.leftBtn {
      /deep/.el-carousel__arrow--left {
        left: 250px;
      }
    }
  }
  .right-view {
    float: left;
    position: fixed;
    top: 176px;
    right: 4%;
    width: 16%;
    height: 806px;
    overflow: auto;
    z-index: 7;
    box-sizing: border-box;
    padding: 10px 20px;
    padding-bottom: 200px;
    color: #353535;
    font-size: 14px;
    font-family: 'PingFangSC-Medium';
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    .nav-title {
      height: 50px;
      font-weight: 800;
      line-height: 50px;
      border-bottom: 1px solid #eee;
    }
    .form-title {
      margin: 16px 0px;
      .sign {
        color: red;
      }
    }
    .form-hint {
      font-size: 12px;
      color: #999;
      margin-bottom: 14px;
    }
    .upload-box {
      width: 248px;
      padding: 10px;
      margin-bottom: 5px;
      border: 1px solid transparent;
      position: relative;
      .removeBtn {
        display: none;
        position: absolute;
        cursor: pointer;
        top: -8px;
        right: -8px;
        width: 20px;
        height: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 224px;
        height: 82px;
        line-height: 82px;
        text-align: center;
        background-color: #eee;
      }
      .avatar {
        width: 224px;
        height: 82px;
        display: block;
      }
    }
    .upload-box:hover {
      box-shadow: 0px 2px 13px 0px rgba(213, 212, 212, 0.5);
      border: 1px solid #e0e0e0;
      .removeBtn {
        display: block;
      }
    }
    .addUploa-box {
      .addUploadBtn {
        width: 224px;
        margin-left: 10px;
      }
      .el-upload__tip {
        margin-left: 21%;
      }
    }
    .collapse-box {
      .collapse-list {
        width: 90%;
        display: flex;
        justify-content: center;
        .title {
          font-size: 14px;
          font-weight: bold;
          padding-left: 20px;
        }
        .btn {
          margin-left: auto;
        }
      }
      .menu-item {
        margin-top: 10px;
        line-height: 40px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 10px;
        .icon-menu {
          width: 10px;
          height: 2px;
          background: #4a4c5b;
          margin: 19px 15px;
          cursor: move;
        }
        .menu-item-level2 {
          width: 207px;
          height: 40px;
          padding-left: 12px;
          background: white;
          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
          border: 1px solid #e0e0e0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #999999;
          .operate-modules {
            margin-right: 10px;
          }
        }
      }
    }
  }
  @media screen and (max-width: 1600px) {
    .left-view {
      .banner-box {
        height: 360px;
        /deep/.el-carousel__container {
          height: 360px;
        }
        .img-box {
          width: 100%;
          height: 360px;
        }
        .nav-menu {
          width: 200px;
          height: 360px;
          .first-menu {
            .first-menu-list {
              .second-menu {
                left: 200px;
                top: 0;
                width: 200px;
                height: 360px;
              }
            }
          }
        }
      }
      .banner-box.leftBtn {
        /deep/.el-carousel__arrow--left {
          left: 210px;
        }
      }
    }
    .right-view {
      right: 1%;
      width: 20%;
      padding: 10px;
      padding-bottom: 250px;
      height: 668px;
    }
  }
}
</style>
